情報学基礎実習 「p5.js」(2020)
https://gyazo.com/57c7c3766127697f7e81cf56785b2174
授業の目的
コーディングによる画像/映像表現を学ぶ
参考
次年度以降に学習する、ArduinoやProcessingの敷居を下げる
授業の質問
Yammerにて受け付けています
/icons/---.icon
はじめに
p5.js Web Editorのアカウントを作る
右上の「Sign up」をクリックしてアカウントを作成
User Nameは任意
p5.js web editorで共有したコードは、インターネット上に公開される
第三者に個人が特定されたくない場合は、匿名性の高い名前にすること
メールアドレスも任意
教材
p5.js 基礎編
p5.js 発展編
映像教材
p5.js reference (関数一覧)
提出課題まとめ
課題
インタラクティブなモーショングラフィックスを作成する
サンプル
ルール
コードは50行以内
キャンバスサイズは 400 x 400 のみ
乱数を1つ以上使用する
インタラクションは、マウスのカーソル移動、マウスの左クリックのみ (両方でも、片方だけでもいい)
授業資料の内容を超越しても構わない
参照したWEBや文献等がある場合は、必ずコード中にコメントすること
安易なコピペではなく、理解したうえで書き直すこと
悪質な場合は0点をつける
作品の意図など、伝えたいことがあれば、コード中にコメントしてもよい
コメントは50行制限に含めない
提出された課題はインターネットに公開する
まとめサイトに、名前や学籍番号は表示しない
(ただしp5.js web editorのアカウント名は、HTMLソースから露見する)
ヒント
まずは授業資料のコードを改造するところから始めると楽です
乱数、インタラクションは、必ず入れましょう
両方ない場合、赤点ギリギリになります
既視感のある小綺麗なデザインよりも、自分なりの創意工夫を高く評価します
自分が面白いと思うもの、かっこいいと思うものを、遊びながら作りましょう
締め切り
授業翌週・水曜正午(12:00)まで
例: 12月25日(金)の受講者は、12月30日(水)12:00までに提出
2021年1月8日(金)まで、遅刻提出をOKにします
ただし、すこし減点はします
課題の提出方法
1. p5.js web editorで、コードのURLを入手する
まずFile -> Saveを選択し、コードを保存する
ファイル名は任意
次にFile -> Shareを選択してコードを共有し、EmbedとEditの2つのURLを入手する
https://gyazo.com/477b6d1f7710bb55b34b7fdd3e1c0790 https://gyazo.com/8078be3442a0d2127de4bb7456d9538e
2. Google Formsで、作品の情報を提出する
名前、学籍番号、前項で入手した作品のURL(EmbedおよびEdit)を入力し、送信する
留意事項
p5.js web editorの性質上...
提出されたコードは第三者からも閲覧可能になる
課題提出後もコードの更新はできる
ただし評価は、授業翌週の水曜午後〜金曜にかけて、週単位で行っている
提出したコードをp5.js web editorから削除してはいけない
成績が確定する2021年4月1日以降は自由
/icons/---.icon
参考資料